<template>
	<div class="app-container">
		<el-row class='content-container'>
			<span class="label-titile">企业名称</span>
			<el-input v-model="reqData.companyName" placeholder="请输入企业名称" style="width:200px" @keyup.enter.native="search"></el-input>
			<el-button type="primary" @click="search">搜索</el-button>
			<el-button type="primary" @click="addData">新建</el-button>
		</el-row>
		<el-row class="content-container">
			<el-table :data="list" style="width: 100%">
				<el-table-column prop="id" label="ID" align="center"></el-table-column>
				<el-table-column prop="name" label="企业名称" align="left"></el-table-column>
				<el-table-column prop="contacts" label="联系人" align="center"></el-table-column>
				<el-table-column prop="tel" label="联系电话" align="center"></el-table-column>
				<el-table-column prop="email" label="邮箱" align="left"></el-table-column>
				<el-table-column prop="createTime" label="创建日期" align="center"></el-table-column>
				<el-table-column label="操作" align="center" width="400px">
					<template slot-scope="scope">
						<!-- <el-button size="mini" type="primary" @click="lookCourse(scope.row.id)">已开课程</el-button> -->
						<el-button size="mini" type="primary" @click="lookStudyCard(scope.row)">学习卡</el-button>
						
						<el-dropdown size="mini" split-button type="primary" @command="handleCommand">
						 	更多
						  <el-dropdown-menu slot="dropdown" >
						    <el-dropdown-item :command="{change:scope.row}">修改</el-dropdown-item>
						    <el-dropdown-item :command="{delete:scope.row}">删除</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
						
						
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="reqData.currentPage" :page-count="totalPageSize" :page-sizes="[10, 20, 30, 50]" :page-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
		
		<!--添加或修改公司弹窗-->
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible">
			<el-form :model="form" label-width="110px" style='width: 80%;margin-left: 30px;' :rules="rules" ref="dataForm">
				<el-row>
					<el-col :span="11">
						<el-form-item label="企业名称" prop="name">
							<el-input v-model="form.name" class="input-width"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="企业邮箱" prop="email">
							<el-input v-model="form.email" class="input-width"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="联系人" prop="contacts">
							<el-input v-model="form.contacts" class="input-width"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="联系电话" prop="tel">
							<el-input v-model="form.tel" class="input-width"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				

				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button type="primary" @click="createData" v-if="dialogStatus === 'create'">确 定</el-button>
				<el-button type="primary" @click="updateData" v-else>确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	import { getCompanyList,saveCompany, deleteCompany} from '@/api/company'
	import { baseUrl } from '@/utils/index'
	import { validateMobile, validateEmail } from '@/utils/validate'
	export default {
		data() {
			var validatePhone = (rule, value, callback) => {
				if(!value) {
					callback(new Error('请输入电话号码'))
				} else if(!validateMobile(value)) {
					callback(new Error('手机号格式不正确'))
				} else {
					callback()
				}
			};
			var validateEmails = (rule, value, callback) => {
				if(!value) {
					callback(new Error('请输入邮箱'))
				} else if(!validateEmail(value)) {
					callback(new Error('邮箱格式不正确'))
				} else {
					callback()
				}
			};
			
			return {
				list: [],
				totalPageSize: 0,
				totalResultSize: 0,
				reqData: {
					currentPage: 1,
					companyName:"",
				},
				dialogVisible:false,
				dialogStatus:"create",
				textMap: {
					update: '修改公司',
					create: '添加公司'
				},
				form: {
					name: "",
					tel: "",
					email: "",
					contacts: "",
				},
				rules: {
					name: [{
						required: true,
						message: '请输入公司名称',
						trigger: 'blur'
					}],
					tel: [{
						required: true,
						validator: validatePhone,
						trigger: 'blur'
					}],
					contacts: [{
						required: true,
						message: '请输入联系人',
					}],
				},
			}
		},
		created(){
			this.getList({});
		},
		methods: {
			getList(data){
				getCompanyList(data).then((res)=>{
					let entitys = res.entity; 
					this.list = [...entitys.data];
					this.totalPageSize = entitys.page.totalPageSize;
					this.totalResultSize = entitys.page.totalResultSize;
				})
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.getList(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.getList(this.reqData);	
			},
			resetCurrent(){
				this.reqData.currentPage = 1;
			},
			search(){
				this.resetCurrent();
				this.getList(this.reqData);	
			},
			resetForm(){
				this.form = {
					name: "",
					tel: "",
					email: "",
					contacts: "",
				};
			},
			saveCompany(text){
				let that = this;
				let FormData = this.form;
				this.$refs['dataForm'].validate((valid) => {
					if(valid) {
						saveCompany(FormData).then((res) => {
							that.getList(that.reqData);
							that.dialogVisible = false
							that.$notify({
								title: '成功',
								message: text + '成功',
								type: 'success',
								duration: 2000
							});

						});
					}

				});
			},
			addData(){
				this.resetForm();
				this.dialogStatus ="create";
				this.dialogVisible = true;
			},
			changeData(row){
				let { id, name, tel, email, contacts,} = row;
				this.form = {id, name, tel, email, contacts};
				this.dialogStatus ="update";
				this.dialogVisible = true;
			},
			closeDialog(){
				this.dialogVisible = false;
				this.resetForm();
			},
			updateData(){
				this.saveCompany("修改");
			},
			createData(){
				this.saveCompany("创建");
			},
			deletData(id){
				let that = this;
				this.$confirm('是否确定删除企业？ 删除之后将无法恢复！', '提示', {
					confirmButtonText: '确定删除',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteCompany(id).then((res)=>{
							that.getList(that.reqData);
					});
				})
				
			},
			lookCourse(id){
				this.$router.push({
					path:"/companyCourse/openCourse",
					query:{
						id
					}
				})
			},
			lookStudyCard(row){
				this.$router.push({
					path:"/companyCard/studyCard",
					query:{
						companyId:row.id
					}
				})
			},
			handleCommand(data){
				if(data.change){
					this.changeData(data.change);
				}else{
					this.deletData(data.delete.id)
				}
			}

		},
		
	}
</script>

<style scoped>
	.image-container {
		width: 280px;
		height: 160px;
	}
	
	.image-container img {
		width: 280px;
		height: 160px;
	}
</style>